<template>
  <div class="login-container">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <el-card ref="loginBox" class="login-box">
      <h3 style="color:white;">星际迷宠后台管理系统</h3>
      <el-input v-model="username" placeholder="请输入用户名" class="username"></el-input>
      <el-input v-model="password" placeholder="请输入密码" class="password" show-password></el-input>
      <el-button
        type="primary"
        class="login-button"
        @click="login"
        v-loading.fullscreen.lock="fullscreenLoading"
      >登陆</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "admin",
      password: "admin",
      fullscreenLoading: false
    };
  },
  mounted() {},
  methods: {
    login() {
      let path = this.$route.query.redirect;
      this.$router.replace(path === "/" || path === undefined ? "/home" : path);
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 2000);
    }
  }
};
</script>

<style lang='css' scoped>
#particles-js {
  padding: 0%;
  margin: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url("../img/bg.jpg");
  background-size: 100% auto;
  top: 0;
  left: 0;
}
.login-container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.login-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: 480px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background:rgba(0,0,0,0.1);
  border: none;
}
.username,
.password {
  margin: 20px 0 0 0;
}
.login-button {
  width: 100%;
  margin-top: 20px;
}
</style>
